<template>
    <div  @scroll="load" class="body-container">
        <p>以史为镜，可以知兴替。</p>
        <div>
            <data-select v-on:getNow="getNow"></data-select>
        </div>
        <p>{{this.todayInHistory.length === 0 ? "暂无数据" : ""}}</p>
         <div class="infinite-list-wrapper" style="overflow:auto">
            <ul
            class="list"
            infinite-scroll-disabled="disabled">
                <div v-for="(item,index) in todayInHistory" :key="index">
                    <el-card class="box-card" style="height:80%;margin-bottom:10px">
                        <p>时间：{{item.days}}</p>
                        <div>事件：{{item.title}}</div>
                    </el-card>
                </div>
            </ul>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore && this.todayInHistory.length != 0 ">没有更多了</p>
        </div>
    </div>
</template>

<script>
import qs from	'qs'
import dataSelect from '../commponents/DataSelect'
export default {
  name: 'TodayInHistory',
  components:{
      dataSelect
  },
  data (){
      return{
        todayInHistory: [],
        yue: 1,
        ri: 1,
        total:'',
        loading: false,
        count: 5,
        page: 1,
      }
  },
  computed: {
      noMore () {
        return this.count >= this.total;
      },
      disabled () {
        return this.loading || this.noMore;
      }
    },
  methods:{
      getTodayInHistory(){
        var _this = this;
        var todayInHistoryData = [];
        var params = {
            yue : _this.yue,
            ri : _this.ri,
            type : _this.type,
            page : _this.page,
            rows : 5
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$axios.post(
            'api/HistoryToday/LookUp?key=d0114951459b43d6bacbc955d873b2af',
             qs.stringify(params)  
            )
            .then(function(response){
                loading.close();
                todayInHistoryData = response.data.result;
                _this.loading = false;
                _this.total = response.data.total;
                _this.formatData(todayInHistoryData);
            })
            .catch(function(error){
                loading.close();
                console.info(error);
            });
    },
    getNow(nowMonth,nowDay,type){
        this.todayInHistory = [];
        this.yue = nowMonth;
        this.ri = nowDay;
        this.type = type;
        this.getTodayInHistory();
    },
    formatData(todayInHistoryData){
        let todayInHistoryData1 = todayInHistoryData;
        for (let index = 0; index < todayInHistoryData.length; index++) {
            todayInHistoryData1[index].days = todayInHistoryData[index].year +'-'+ todayInHistoryData[index].month +'-'+todayInHistoryData[index].day;
            todayInHistoryData1[index].title = todayInHistoryData[index].title;
             this.todayInHistory.push(todayInHistoryData1[index]);
        } 
    },
     load (e) { 
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.loading && !this.noMore){
            this.loading = true;
            this.page ++;
            this.count += 5;
            this.getTodayInHistory();   
        }
      }
  }
}
</script>
<style  scoped>
.box-card {
    width:80%;
    height: 90%;
    margin: auto;
  }
  .body-container{  
    position: fixed;  
    top:0;  
    left: 0;  
    right:0;  
    bottom: 0;  
    overflow: auto  
  }  
</style>
